<template>
	<view class="bottomnavbox">
		<u-grid :col="3" hover-class="true" @click="bottomNav">
			<u-grid-item index="1" hover-class="">
				<u-icon name="email" :size="28"></u-icon>
				<view class="grid-text">邮件</view>
			</u-grid-item>
			<u-grid-item index="2">
				<u-icon name="chrome-circle-fill" :size="28"></u-icon>
				<view class="grid-text">新闻</view>
			</u-grid-item>

			<u-grid-item index="3">
				<u-icon name="pushpin" :size="28"></u-icon>
				<view class="grid-text">工具</view>
			</u-grid-item>
		</u-grid>
	</view>
</template>

<script>
	// 底部菜单栏
export default{
	props: {
		// align: String
		align: ''
	},
	name:'bottomNav',
	data() {
		return {
		}
	},
	onLoad() {},

	methods: {
		bottomNav(index){

			index === '1' ? this.GoToURL('index') : index === '2' ? this.GoToURL('pressCenterNews/news') : index === '3' ? this.GoToURL('toolCabinet/tool'):this.GoToURL();
		},
		GoToURL(url){
			console.log(url)
			if(!!url){ //不等于 null undefined
				uni.navigateTo({
					url: `../${url}`
				})
			}
			
		},
	}
}
</script>

<style scoped lang="scss">
.bottomnavbox {
	position: fixed;
	bottom: 0px;
	width: 100%;
}
.wrap {
	// padding: 24rpx;
}
.u-row[data-v-d7db3e24] {
	margin: 0;
}
.u-row {
	margin: 40rpx 0;
}

.demo-layout {
	height: 80rpx;
	border-radius: 8rpx;
}

.bg-purple {
	// background: #d3dce6;
}

.bg-purple-light {
	// background: #e5e9f2;
}

.bg-purple-dark {
	// background: #99a9bf;
}

.incos {
	text-align: center;
}

p {
	text-align: -webkit-center;
}

.badge-icon {
	position: absolute;
	top: 14rpx;
	right: 40rpx;
	width: 30rpx;
	height: 30rpx;
}

.grid-text {
	font-size: 28rpx;
	margin-top: 4rpx;
	color: $u-type-info;
}
</style>
